<template>
  <el-dialog
    :title="type == 'add' ? '创建应用' : '修改应用'"
    v-model="visible"
    width="600px"
    :close-on-click-modal="false"
  >
    <el-form :model="ruleForm" :rules="rules" ref="formRef" label-width="100px" class="good-form">
      <el-form-item label="姓名" prop="name">
        <el-input type="text" v-model="ruleForm.name" :disabled="type=='edit'"></el-input>
      </el-form-item>
      <el-form-item label="ip" prop="ip">
        <el-input type="text" v-model="ruleForm.ip" :disabled="type=='edit'"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input type="text" v-model="ruleForm.address" :disabled="type=='edit'"></el-input>
      </el-form-item>
      <!-- <el-form-item label="失效时间" prop="invalidTime" class="width100Percent">
        <el-date-picker v-model="ruleForm.invalidTime" type="datetime" format='YYYY-MM-DD HH:mm:ss'  placeholder="选择日期时间"></el-date-picker>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
  <script lang='ts'>
import { createApp, updateApp } from '/@/api/components/app'
import { nextTick, reactive, ref, toRefs } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { rules } from './validatorRules'
import {getymd} from '/@/utils/tools'
export default {
  name: 'DialogAddOrUpdateApp',
  props: {
    type: String,
    reload: Function
  },
  setup(props: any) {
    const formRef = ref<any>(null)
    const route = useRoute()
    const state = reactive({
      visible: false,
      ruleForm: {
        name: '',
        ip: '',
        address: '',
      },
      submitLoading: false,
    })
    // 开启弹窗
    const open = async (row: any) => {
      state.visible = true
      if (row) {
        state.ruleForm = JSON.parse(JSON.stringify(row))
      } else {
        state.ruleForm = {
          name: '',
          ip: '',
          address: '',
        }
      }
      await nextTick()
      formRef.value.clearValidate()
    }
    // 关闭弹窗
    const close = () => {
      state.visible = false
    }

    const submitForm = () => {
      formRef.value.validate(async (valid: any) => {
        if (valid) {
          state.submitLoading = true
          if (props.type == 'add') {
            await createApp(state.ruleForm).finally(() => {
              state.submitLoading = false
            })
            ElMessage.success('添加成功')
            state.visible = false
            if (props.reload) props.reload()
          }
          else if (props.type == 'edit') {
            await updateApp(state.ruleForm).finally(() => {
              state.submitLoading = false
            })
            ElMessage.success('更新成功')
            state.visible = false
            if (props.reload) props.reload()
          }
          else {
            state.submitLoading = false
          }
        }
      })
    }
    return {
      ...toRefs(state),
      open,
      close,
      formRef,
      submitForm,
      rules
    }
  }
}
</script>
  
  <style scoped>
</style>